<%-- 
    Document   : timkiem
    Created on : Dec 1, 2011, 11:00:28 AM
    Author     : BlueZky
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<link rel="stylesheet" type="text/css" href="styles/paging.css"/>

<script>
    $(document).ready(function(){
        $('#page').change(function(){
            $('#paging').submit();
        });
        $('#number').change(function(){
            $('#top-num').submit();
        });
    });
</script>
<c:set var="cUrl" value="&catalog=${catalog}&sub-catalog=${sub-catalog}&price=${price}"/>
<div class="content">
    <div class="content-menu">
        <div class="mid-left">
            <div class="citem">Product</div>
            <div class="cexpand"></div>
            <div class="citem">Mac</div>
        </div>
        <div class="mid-right">
            <form id="top-num" method="post" action="timkiem.htm?a=${a}&search=${search}${cUrl}&page=0">
                <div class="mselect" >
                    <select id="number" name="num" >
                        <option <c:if test="${num eq 8}">selected</c:if> value="8">8</option>
                        <option <c:if test="${num eq 16}">selected</c:if> value="16">16</option>
                        <option <c:if test="${num eq 32}">selected</c:if> value="32">32</option>
                        </select>
                    </div>
                    <div class="mselect" >
                        <select id="dispay" name="display" >
                            <option value="0">Grid</option>
                            <option value="1">Table</option>
                        </select></div>
                </form>
            </div>
        </div>
        <div class="partion">				

            <div class="box">
            <c:forEach items="${danhSach}" var="item" varStatus="status" >   
                <div class="product-box decorate">
                    <a href="chitiet.htm?PID=${item.masp}">
                        <div class="balance" style="width: 130px">
                            <img src="${item.hinhanh}" alt="${item.tensp}" />
                        </div>
                        <div class="des">
                            <strong>
                                <c:if test="${fn:length(item.tensp) gt 25}">
                                    ${fn:substring(item.tensp,0, 25)}...
                                </c:if>
                                <c:if test="${fn:length(item.tensp) lt 25}">
                                    ${item.tensp}
                                </c:if>
                            </strong>
                            <br/>
                            <span class="price">From $${item.gia}</span>
                        </div>
                    </a>
                </div> 
            </c:forEach>
        </div>



        <div class="horizontal-line" style="border:none"></div>  
    </div>
    <c:if test="${last gt 0}">
        <div class="partion" style="margin-top: 10px;">
            <div class="p-container">

                <form  id="paging" method="post" action="timkiem.htm?a=${a}&search=${search}${cUrl}&num=${num}">
                    <a href="timkiem.htm?a=${a}&search=${search}${cUrl}&num=${num}&page=0"><img src="images/first.png" alt="first"/></a>
                        <c:if test="${page gt 0}">
                        <a href="timkiem.htm?a=${a}&search=${search}${cUrl}&num=${num}&page=${page-1}"><img src="images/prev.png" alt="previous"/></a>
                        </c:if>
                    <div class="p-box">
                        Trang <select id="page" name ="page" class="p-input">
                            <c:forEach  varStatus="status" begin="0" end="${last}" step="1">
                                <option value="${status.index}" 
                                        <c:if test="${status.index eq page}">selected="true"</c:if>
                                        >${status.index + 1}</option>
                            </c:forEach>
                        </select>
                        / ${last + 1}
                    </div>
                    <c:if test="${page ne last}">
                        <a href="timkiem.htm?a=${a}&search=${search}${cUrl}&num=${num}&page=${page + 1 }"><img src="images/next.png" alt="next"/></a>
                        </c:if>
                    <a href="timkiem.htm?a=${a}&search=${search}${cUrl}&num=${num}&page=${last}"><img src="images/last.png" alt="last"/></a>
                </form>

            </div>
            <div style="clear: both"></div>
        </div>
    </c:if>
</div>